/**
 * Created by Ysssssss on 2021/4/22.
 */

import React from 'react'
import getCdnUrl from "@utils/getCdnUrl";
import { Table } from "antd";


const OrderDetailProductTable = props => {
    const { columns, detailList }  = props
    const combinedColumns = [{
        title: '商品名称',
        dataIndex: 'prod_name',
        key: 'prod_name',
        width: 280,
        render: (text, record) => (
            <div className="flex">
                <img width={56} height={56} src={getCdnUrl(record.pic)} />
                <div className="mgl-16 flex-vertical-center"  style={{width: '170px'}}>
                    <div className="ft-12 ft-clr-d text-overflow w-100">{text || record.name}</div>
                    { record.sku_name ? (
                        <div className="ft-clr-ml ft-12 text-overflow mgt-8 w-100">{ record.sku_name }</div>
                    ) : null }
                </div>
            </div>
        )
    }, ...columns]

    const _detailList = detailList.map(prod => ({
        ...prod,
        key: prod.id,
    }))

    return (
        <div className="order-detail-product-table">
            <Table
                columns={combinedColumns}
                pagination={false}
                dataSource={_detailList}
            />
        </div>
    )
}

export default OrderDetailProductTable